<template>
	<view>
		<star-nav :listType="1" title="星际战机" icon="/static/icon-images/rocket.png"></star-nav>
		<view class="content">
			<notice ref="noticeRef" class="mt-20"></notice>
		</view>

		<!-- <view class="page">
			<view class="main-content">
				<view class="modules-container">
					  <view class="cyber-card invite-card">
						<view class="card-border"></view>
						 <text class="module-title glow-text-pink">邀请好友，共战星际</text>
						<view class="invite-code">
							<text class="invite-code-text">{{infoList.idNumber}}</text>
						</view>
						<view class="button-row">
							<button class="cyber-btn btn-blue" @click="$copy(infoList.idNumber)">
								<text class="btn-text">复制邀请码</text>
							</button>
							<button class="cyber-btn btn-purple" @click="$jump('/pages/my/share')">
								<text class="btn-text">生成海报</text>
							</button>
						</view> 
					</view>  
					<view class="cyber-card ranking-card">
						<view class="card-border"></view>
						<text class="module-title glow-text-blue">投入积分排行榜</text>
						<button class="cyber-btn btn-cyan full-btn" @click="$jump('/pages/index/rank')">
							<text class="btn-text">查看完整排行</text>
						</button>
					</view>
					<view class="bottom1">
						<view class="cyber-card1 community-card1">
							<view class="card-border"></view>
							<text class="module-title glow-text-pink" style="width: 100%;text-align: center;">加入星际指挥部</text>
							<view class="qq-section">
								<view class="qr-code">
									<image src="https://api.dicebear.com/7.x/shapes/svg?seed=qrcode" class="qr-img"
										mode="widthFix" />
								</view>
								<text class="qq-group">官方QQ群: {{qqList.number}}</text>
							</view>
						
							<button class="cyber-btn btn-red full-btn" @click="$copy(qqList.number)">
								<text class="btn-text">一键加群</text>
							</button>
						</view>
						<view class="cyber-card1 community-card1">
							<view class="card-border"></view>
							<text class="module-title glow-text-pink" style="width: 100%;text-align: center;">活动转盘</text>
							<view class="qq-section">
								<view class="qr-code">
									<image src="https://api.dicebear.com/7.x/shapes/svg?seed=qrcode" class="qr-img"
										mode="widthFix" />
								</view>
								<text class="qq-group" style="height: 34rpx;">  </text>
							</view>
							<button class="cyber-btn btn-red full-btn" @click="toTurntable">
								<text class="btn-text">立刻开始</text>
							</button>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<view style="margin: 20rpx;">
			<view style="display: flex;gap: 20rpx;flex-direction: column;">
				<view style="display: flex;gap: 20rpx;">
					<view class="card" style="flex: 1;padding: 20rpx;position: relative;"
						@click="$jump('/pages/my/share')">
						<image src="/static/public-images/p1.png" mode="widthFix"
							style="width: 150rpx;position: absolute;bottom: 0;right: 0;"></image>
						<view style="color: #dcdcdc;font-size: 32rpx;font-weight: 700;line-height: 2;">邀请好友</view>
						<view style="color: #cacaca;font-size: 24rpx;font-weight: 500;">点击分享</view>
					</view>
					<view class="card" style="flex: 1;padding: 20rpx;position: relative;"
						@click="toTab('/pages/game/index')">
						<image src="/static/public-images/p4.png" mode="widthFix"
							style="width: 95rpx;position: absolute;bottom: 0;right: 0;"></image>
						<view style="color: #dcdcdc;font-size: 32rpx;font-weight: 700;line-height: 2;">游戏中心</view>
						<view style="color: #cacaca;font-size: 24rpx;font-weight: 500;">查看更多</view>
					</view>
				</view>
				<view style="display: flex;gap: 20rpx;">
					<view class="card" style="flex: 1;padding: 20rpx;position: relative;"
						@click="$jump('/pages/index/rank')">
						<image src="/static/public-images/p3.png" mode="widthFix"
							style="width: 150rpx;position: absolute;bottom: 0;right: 0;"></image>
						<view style="color: #dcdcdc;font-size: 32rpx;font-weight: 700;line-height: 2;">积分排行榜</view>
						<view style="color: #cacaca;font-size: 24rpx;font-weight: 500;">查看更多</view>
					</view>
					<view class="card" style="flex: 1;padding: 20rpx;position: relative;"
						@click="$jump('/pages/my/vip')">
						<image src="/static/public-images/p2.png" mode="widthFix"
							style="width: 150rpx;position: absolute;bottom: 0;right: 0;"></image>
						<view style="color: #dcdcdc;font-size: 32rpx;font-weight: 700;line-height: 2;">会员中心</view>
						<view style="color: #cacaca;font-size: 24rpx;font-weight: 500;">查看更多</view>
					</view>
				</view>
			</view>
		</view>


		<view style="margin:30rpx 20rpx;">
			<view class="bottom1">
				<view class="cyber-card1 community-card1">
					<view class="card-border"></view>
					<text class="module-title glow-text-pink" style="width: 100%;text-align: center;">加入星际指挥部</text>
					<view class="qq-section">
						<view class="qr-code">
							<image src="https://api.dicebear.com/7.x/shapes/svg?seed=qrcode" class="qr-img"
								mode="widthFix" />
						</view>
						<text class="qq-group">官方QQ群: {{qqList.number}}</text>
					</view>

					<button class="cyber-btn btn-red full-btn" @click="$copy(qqList.number)">
						<text class="btn-text">一键加群</text>
					</button>
				</view>
				<view class="cyber-card1 community-card1">
					<view class="card-border"></view>
					<text class="module-title glow-text-pink" style="width: 100%;text-align: center;">活动转盘</text>
					<view class="qq-section">
						<view class="qr-code">
							<image src="https://api.dicebear.com/7.x/shapes/svg?seed=qrcode" class="qr-img"
								mode="widthFix" />
						</view>
						<text class="qq-group">摇转盘赢奖励</text>
					</view>
					<button class="cyber-btn btn-red full-btn" @click="toTurntable()">
						<text class="btn-text">点击参与</text>
					</button>
				</view>
			</view>
		</view>


		<!-- <star-fly></star-fly> -->
		<!-- <view @click="handleRank">排行榜</view> -->
		<!-- 加入QQ社区弹窗 -->
		<!-- <qqGroup ref="qqGroupRef" :show="qqGroupShow" @success="qqGroupShow = false" /> -->
	</view>
</template>

<script>
	import {
		userlevelConfig,
		getInfo
	} from '@/api/my.js'
	import {
		getMainQQ,
		loginTime
	} from '@/api/index.js'
	import qqGroup from './components/qqGroup/index.vue'
	import banner from './components/banner/index.vue'
	import bottom from './components/bottom/index.vue'
	import notice from './components/notice/index.vue'
	export default {
		components: {
			notice,
			qqGroup,
			banner,
			bottom
		},
		data() {
			return {
				qqGroupShow: false,
				qqList: {},
				infoList: {},

			}
		},
		onShow() {
			this.getQQ()
			this.getUser()
		},
		onLoad() {
			setTimeout(() => {
				this.setLoginTime()
			}, 800)
			setTimeout(() => {
				// this.$refs.versionRef.detectNewVersion()
				this.$refs.noticeRef.getData()
				// this.$refs.qqGroupRef.getQQ()
			}, 500)
		},
		methods: {
			toTab(url){
				uni.switchTab({
					url:url
				})
			},
			toTurntable() {
				uni.navigateTo({
					url: '/pages/index/turntable'
				})
			},
			// 活跃度
			async setLoginTime() {
				let data = {
					name: this.infoList.name || null,
					idCard: this.infoList.idCard || null
				}
				await loginTime(data)
			},
			handleRank() {
				uni.navigateTo({
					url: '/pages/index/rank'
				})
			},
			async getQQ() {
				const res = await getMainQQ()
				this.qqList = res.data
				// console.log(res);
			},
			async getUser() {
				const res = await getInfo()
				this.infoList = res.data
				// console.log(res);
			},
			async getLevel() {
				const res = await userlevelConfig()
				console.log(res);
			},
			async getMyLevel() {
				const res = await userlevelConfig()
				console.log(res);
			},
			async getMyFriend() {
				const res = await userlevelConfig()
				console.log(res);
			}
		}
	}
</script>

<style scoped>
	.bottom1 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	page {
		width: 100%;
		height: 100vh;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	}

	.content {
		padding: 20rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.page {
		width: 100%;
		height: 100vh;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
		position: relative;
		/* min-height: 100vh; */
		background-color: #0F172A;
		color: #E2E8F0;
		font-family: 'Rajdhani', 'Noto Sans SC', sans-serif;
		overflow-x: hidden;
	}

	.main-content {
		padding-top: 10rpx;
		padding-bottom: 120rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
	}

	.modules-container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
		gap: 32rpx;
	}

	.cyber-card1 {
		width: 39%;
		position: relative;
		border-radius: 24rpx;
		overflow: hidden;
		background: linear-gradient(to bottom right, #0F172A, #1E293B);
		padding: 32rpx;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.cyber-card {
		width: 90%;
		position: relative;
		border-radius: 24rpx;
		overflow: hidden;
		background: linear-gradient(to bottom right, #0F172A, #1E293B);
		padding: 32rpx;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.card-border {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 24rpx;
		pointer-events: none;
		/* box-shadow: 0 0 20px rgba(6, 182, 212, 0.5); */
		/* border: 1px solid rgba(6, 182, 212, 0.3); */
	}

	.invite-card .card-border {
		/* box-shadow: 0 0 20px rgba(6, 182, 212, 0.5); */
		/* border-color: rgba(6, 182, 212, 0.3); */
	}

	.ranking-card .card-border {
		/* box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); */
		/* border-color: rgba(139, 92, 246, 0.3); */
	}

	.community-card1 .card-border {
		/* box-shadow: 0 0 20px rgba(239, 68, 68, 0.5); */
		/* border-color: rgba(239, 68, 68, 0.3); */
	}

	.community-card .card-border {
		/* box-shadow: 0 0 20px rgba(239, 68, 68, 0.5); */
		/* border-color: rgba(239, 68, 68, 0.3); */
	}

	.module-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 32rpx;
		display: block;
	}

	.glow-text-pink {
		color: #EC4899;
		/* text-shadow: 0 0 10px rgba(236, 72, 153, 0.7), 0 0 20px rgba(236, 72, 153, 0.5); */
	}

	.glow-text-blue {
		color: #3B82F6;
		text-shadow: 0 0 10px rgba(59, 130, 246, 0.7), 0 0 20px rgba(59, 130, 246, 0.5);
	}

	.invite-code {
		margin-top: 30rpx;
		background: linear-gradient(45deg, rgba(6, 182, 212, 0.2), rgba(139, 92, 246, 0.2));
		border: 1px solid rgba(6, 182, 212, 0.3);
		border-radius: 16rpx;
		padding: 24rpx;
		text-align: center;
		margin-bottom: 32rpx;
	}

	.invite-code-text {
		font-family: monospace;
		font-size: 32rpx;
		color: #06B6D4;
	}

	.progress-section {
		margin-bottom: 32rpx;
	}

	.progress-info {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		margin-bottom: 16rpx;
	}

	.text-gray {
		color: #94a3b8;
	}

	.text-cyan {
		color: #06B6D4;
	}

	.progress-bar {
		height: 20rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 10rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #06B6D4, #3B82F6);
		border-radius: 10rpx;
	}

	.button-row {
		display: flex;
		gap: 24rpx;
	}

	.cyber-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 2rpx;
		color: white;
		border: none;
		outline: none;
		cursor: pointer;
	}

	.btn-blue {
		background: linear-gradient(135deg, #06B6D4, #3B82F6);
		box-shadow: 0 0 20rpx rgba(6, 182, 212, 0.5);
	}

	.btn-purple {
		background: linear-gradient(135deg, #8B5CF6, #EC4899);
		box-shadow: 0 0 20rpx rgba(139, 92, 246, 0.5);
	}

	.btn-cyan {
		background: linear-gradient(135deg, #06B6D4, #8B5CF6);
		box-shadow: 0 0 20rpx rgba(6, 182, 212, 0.5);
	}

	.btn-red {
		background: linear-gradient(135deg, #EF4444, #F87171);
		box-shadow: 0 0 20rpx rgba(239, 68, 68, 0.5);
	}

	.full-btn {
		width: 100%;
		flex: none;
	}

	.qq-section {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		margin-bottom: 32rpx;
	}

	.qr-code {
		margin-top: 20rpx;
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		display: inline-block;
		margin-bottom: 24rpx;
	}

	.qr-img {
		width: 128rpx;
		height: 128rpx;
	}

	.qq-group {
		font-weight: 500;
		color: white;
		margin-bottom: 8rpx;
	}

	@media (max-width: 768px) {
		.modules-container {
			grid-template-columns: 1fr;
		}
	}
</style>